<template>
  <div class="app-container main-context">
    <project-item ref="projectItem" class="project" @currentProjectChange="currentProjectChange" />
    <div class="identification">
      <div class="point-item">
        <div class="point" :style="{backgroundColor:testingColor}" />
        <span class="text">TESTING</span>
      </div>
      <div class="point-item">
        <div class="point" :style="{backgroundColor:idleColor}" />
        <span class="text">IDLE</span>
      </div>
    </div>
    <el-tabs ref="tabs" v-model="activeName" class="tabs" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="(item,index) in fabStateList" :key="index" :label="item.fabName" :name="item.id.toString()" class="tab-pane" style="background:white">
        <div class="factory-header">
          <factory :fab-info="fabInfo" :title="item.fabName" />
          <factory-header ref="yield" :type="1" />
          <factory-header ref="oee" :type="2" />
          <factory-header ref="uph" :type="3" />
        </div>
        <div class="factory-content">
          <factory-cell v-if="item.testing !== 0" ref="testing" class="factory-cell" :type="1" />
          <factory-cell v-if="item.hold !== 0" ref="hold" class="factory-cell" :type="2" />
          <factory-cell v-if="item.idle !== 0" ref="idle" class="factory-cell" :type="3" />
        </div>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { VxeListMixin } from '@/mixins/VxeListMixin'
import projectItem from '@/views/companents/projectItem/other_index.vue'
import Factory from './companents/factory.vue'
import FactoryHeader from './companents/factoryHeader.vue'
import FactoryCell from './companents/factoryCell.vue'
import { yields } from '../dashboard/options'

export default {
  name: 'Dashboard',
  components: {
    projectItem,
    Factory,
    FactoryHeader,
    FactoryCell
  },
  mixins: [VxeListMixin],
  data() {
    return {
      searchPro: '',
      url: {
        getFabStateList: this.$api.ProductionController.getFabStateList,
        getFabInfo: this.$api.ProductionController.getFabInfo,
        getFabInfoList: this.$api.ProductionController.getFabInfoList
      },
      tabIndex: 0,
      projectId: '',
      fabId: '',
      fabStateList: [
        // {
        //   'id': '1',
        //   'fabName': '工厂1',
        //   'fabState': 'testing',
        //   'testing': 0, // 是否存在testing数据
        //   'hold': 0, // 是否存在hold数据
        //   'idle': 1 // 是否存在idle数据
        // },
        // {
        //   'id': '3',
        //   'fabName': '工厂3',
        //   'fabState': 'testing',
        //   'testing': 0, // 是否存在testing数据
        //   'hold': 0, // 是否存在hold数据
        //   'idle': 1 // 是否存在idle数据
        // },
        // {
        //   'id': '2',
        //   'fabName': '工厂2',
        //   'fabState': 'idle',
        //   'testing': 0, // 是否存在testing数据
        //   'hold': 0, // 是否存在hold数据
        //   'idle': 1 // 是否存在idle数据
        // }
      ],
      fabInfo: {
        // 'name': '工厂2',
        // 'time': '2024-07-08 20:30:04', // 时间
        // 'alreadyTestUnit': '6', // 已测单元
        // 'alreadyTest': '20', // 已测试量
        // 'awaitTest': '120', // 待测试量
        // 'testing': 3, // testing机台数
        // 'onHold': 12, // onHold机台数
        // 'idle': 9, // idle机台数
        // 'yield': {
        //   'hisAve': '23940', // 历史平均良率
        //   'current': '19230'// 当前平均良率
        // },
        // 'oee': {
        //   'hisAve': '65.58%', // 历史平均OEE
        //   'current': '63.53%'// 当前OEE
        // },
        // 'upd': {
        //   'hisAve': '63.22', // 历史平均UDP
        //   'current': '65.43'// 当前UDP
        // }
      },
      activeName: '1',
      testingColor: '#8EBE47',
      idleColor: '#D5665C',
      count: 0,
      loading: false,
      params: {
        page: 1,
        pageSize: 12
      },
      list: []
    }
  },
  computed: {
    ...mapGetters(['name']),
    noMore() {
      return this.count >= this.list.length
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
  created() {
    this.url.query = this.url.queryList
    this.load()
    // 初始化项目切换组件
    this.$nextTick(() => {
      this.$refs.projectItem.init(this.projectId)
    })
    if (this.fabStateList && this.fabStateList.length !== 0) {
      this.activeName = this.fabStateList[0].id.toString()
    }

    this.projectId = this.$store.getters.projectId
    this.currentProjectChange(this.projectId)
  },
  methods: {
    handleClick(tab) {
      const item = this.fabStateList[tab.index]
      this.fabId = item.id
      this.tabIndex = tab.index
      this.getFabInfo()
      this.$nextTick(() => {
        this.$refs.yield[this.tabIndex].init(this.fabInfo)
        this.$refs.oee[this.tabIndex].init(this.fabInfo)
        this.$refs.uph[this.tabIndex].init(this.fabInfo)
      })
      if (item.testing !== 0) {
        this.$refs.testing[this.tabIndex].init(this.fabId)
      }
      if (item.hold !== 0) {
        this.$refs.hold[this.tabIndex].init(this.fabId)
      }
      if (item.idle !== 0) {
        this.$refs.idle[this.tabIndex].init(this.fabId)
      }
      this.$nextTick(() => {
        for (let y = 0; y < this.fabStateList.length; y++) {
          const childElement = this.$refs.tabs.$el.querySelector('.el-tabs__item:nth-child(' + (y + 1) + ')')
          if (parseInt(tab.index) === y) {
            childElement.style.color = 'white'
            if (item.fabState === 'testing') {
              childElement.style.backgroundColor = this.testingColor
            } else {
              childElement.style.backgroundColor = this.idleColor
            }
          } else {
            childElement.style.backgroundColor = 'white'
            if (item.fabState === 'testing') {
              childElement.style.color = this.testingColor
            } else {
              childElement.style.color = this.idleColor
            }
          }
        }
      })
    },
    // 工厂状态列表
    getFabStateList() {
      this.$fetchData(this.url.getFabStateList, { projectId: this.projectId }, 'post').then(res => {
        this.fabStateList = res
        if (this.fabStateList && this.fabStateList.length !== 0) {
          this.activeName = this.fabStateList[0].id.toString()
        }
        // 更新工厂状态颜色
        this.$nextTick(() => {
          this.handleClick({ index: 0 })
          this.updateChildStyle()
        })
      })
    },
    async currentProjectChange(projectId) {
      this.projectId = projectId
      // 返回项目id后，进行下列请求
      await this.getFabStateList()
    },
    // 工厂信息
    async getFabInfo() {
      await this.$fetchData(this.url.getFabInfo, { fabId: this.fabId }, 'post').then(res => {
        this.fabInfo = res
      })
      this.$nextTick(() => {
        this.$refs.yield[this.tabIndex].init(this.fabInfo)
        this.$refs.oee[this.tabIndex].init(this.fabInfo)
        this.$refs.uph[this.tabIndex].init(this.fabInfo)
      })
    },
    // 工厂列表
    getFabInfoList(param) {
      this.$fetchData(this.url.getFabInfoList, param, 'post').then(res => {
        this.fabStateList = res
      })
    },
    updateChildStyle() {
      // 假设你想要修改子组件中某个元素的样式
      // 使用 ::v-deep 选择器来穿透子组件的作用域
      this.$nextTick(() => {
        for (let index = 0; index < this.fabStateList.length; index++) {
          const childElement = this.$refs.tabs.$el.querySelector('.el-tabs__item:nth-child(' + (index + 1) + ')')
          if (childElement) {
            const item = this.fabStateList[index]
            childElement.style.backgroundColor = 'white'
            if (item.fabState === 'testing') {
              childElement.style.color = this.testingColor
            }
            if (item.fabState === 'idle') {
              childElement.style.color = this.idleColor
            }
          }

          if (index === 0) {
            const item = this.fabStateList[index]
            childElement.style.color = 'white'
            if (item.fabState === 'testing') {
              childElement.style.backgroundColor = this.testingColor
            } else {
              childElement.style.backgroundColor = this.idleColor
            }
          }
        }
      })
    },
    load() {
      this.loading = true
      this.query((res) => {
        this.list = res
        for (let index = 0; index < 30; index++) {
          const element = 'X' + [index]
          this.list.push(element)
        }
        const step = this.params.pageSize
        if ((this.list.length - this.count) / step >= 0) {
          this.params.page++
          this.count += step
          console.log(this.params)
        } else {
          this.$message.warning('没有更多信息了')
        }
        this.loading = false
      }).catch((err) => {
        console.log(err)
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.project {
  display: flex;
  flex-wrap: wrap;
  .item {
    flex: 0 0 25%; /* 每个div占用20%的宽度 */
  }
}
.identification{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .point-item{
    display: flex;
    margin-right: 10px;
    .point{
      width: 10px;
      height: 10px;
      border-radius: 5px;
      margin-right: 5px;
      background-color: #409EFF;
    }
    .text{
      font-size: 12px;
    }
  }
}
.more_button{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item{
  color: white;
}
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.default{
    color: #D5665C;
}
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
    font-weight: 1000;
    font-size: 15px;
    background-color: #D5665C;
    color: white;
}
.tab-pane{
  background:#fafafa;
  .factory-header{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 280px;
    background:#fafafa;
    margin-bottom: 10px;
  }
  .factory-content{
    .factory-cell{
      margin-bottom: 10px;
    }
  }
}

</style>
